﻿<template>
  <div class="residents-container">
    <el-dialog
      v-model="dialogObj.isDialogVisible"
      :title="dialogObj.editResidentsTitle"
      width="500px"
      top="10vh"
      modal-class="res-add"
      @open="openDialog"
    >
      <div class="res-add-content">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="130px"
        >
        <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20"
            >
              <el-form-item
                label="操作时间："
                prop="createTime"
              >
                <span>{{ ruleForm.createTime }}</span>
              </el-form-item>
            </el-col>
          <el-row :gutter="20">
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20"
            >
              <el-form-item label="操作模块：" prop="title">
                <span>{{ ruleForm.title }}</span>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20"
            >
              <el-form-item label="功能：" prop="businessType">
                <span>{{ ruleForm.businessType }}</span>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20"
            >
              <el-form-item label="账号：" prop="operName" >
                <span>{{ ruleForm.operName }}</span>
              </el-form-item>
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20"
            >
              <el-form-item label="参数列表：" prop="operParam" >
                <span>{{ ruleForm.operParam }}</span>
              
              </el-form-item>
            </el-col>
           
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20"
            >
              <el-form-item label="返回信息：" prop="jsonResult">
                <div class="json-result-container">
      <span>{{ ruleForm.jsonResult }}</span>
    </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog" size="large">取 消</el-button>
          <!-- <el-button type="primary" @click="onSubmit" size="large"
            >确 定</el-button
          > -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { parseISO } from "date-fns";
export default {
  props: {
    dialogObj: {
      type: Object,
      default: () => ({
        isDialogVisible: false,
        editResidentsTitle: "",
        DialogDate: {},
      }),
    },
  },
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      isshow: true,
      tipshow: true,
      inspectionTime: new Date(),
      // 基本信息
      ruleForm: {
        createTime: "", 
        title: "", 
        businessType: "", 
        operName: "", 
        operParam: "", 
        jsonResult: "" 
      },
    };
  },

  methods: {
    openDialog() {
      this.ruleForm = this.dialogObj.DialogDate;
    },
    //关闭弹窗
    closeDialog() {
      this.dialogObj.isDialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
  watch: {
    dialogObj: {
      handler(newVal, oldVal) {
        this.ruleForm = newVal.DialogDate;
        console.log(this.ruleForm);
      },
      deep: true, // 深度监听，确保对象内部属性的变化也能被监听到
    },
  },
  mounted() {},
};
</script>

<style scoped>
.json-result-container {
  max-height: 150px; /* 设置最大高度 */
  overflow-y: auto;  /* 当内容过长时添加滚动条 */
  word-wrap: break-word; /* 自动换行 */
  white-space: pre-wrap; /* 保留空格并换行 */
  border: 1px solid #dcdfe6; /* 添加边框 */
  padding: 10px; /* 增加内边距 */
  background-color: #f5f5f5; /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
}
.residents-container {
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  scrollbar-width: none !important; /* 适用于Firefox */
}
.res-add-content {
  overflow-y: auto;
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  scrollbar-width: none !important; /* 适用于Firefox */
}
.res-add-content::-webkit-scrollbar {
  display: none !important;
}
:deep(.el-input__wrapper) {
  width: 280px !important;
}
:deep(.el-form-item .el-select__wrapper) {
  min-height: 32px;
  width: 100% !important;
}
.ml20 {
  margin-left: 25px;
}
.flex {
  display: flex;
}
.el-radio.is-bordered {
  padding: 0 50px 0 50px;
  height: 32px;
}
.shell {
  width: 100%;
  border: 1px solid #ccc;
}
:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}
:deep(.el-checkbox) {
  margin-right: 18px;
}
:deep(.el-input-group__append) {
  width: 52px;
}
/* :deep(.el-checkbox__inner) {
  border-radius: 50%;
} */
:deep(.el-dialog__header) {
  background-color: #016dff;
  margin: 0;
  height: 30px;
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
  font-size: 30px;
}
:deep(.el-form-item--large .el-form-item__content) {
  margin-left: 0 !important;
}
.title_box {
  width: 150px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #000;
  background-color: #ccc;
}
.iconBox {
  font-size: 25px;
  /* position: absolute;
  right: 168px;
  top: 68px; */
  cursor: pointer;
  margin-left: 15px;
}
.flexBox {
  display: flex;
  margin-bottom: 20px;
}
.flexB {
  display: flex;
  justify-content: end;
}
.bing {
  padding-left: 174px;
}
.tip {
  font-size: 12px;
  color: red;
  z-index: 9;
}
.mb20 {
  margin-bottom: 20px;
}
.flex_center {
  display: flex;
  justify-content: center;
}
/* .dialog-footer{
  display: flex;
  justify-content: start;
} */
</style>
